import React, { Component } from 'react';
import { Tag , Typography, Image  } from 'antd';
import { withRouter  } from 'react-router-dom';
import Http from '../../util/http';
import './index.less';

const { Paragraph } = Typography;

class Recommend extends Component {
    constructor(props) {
        super(props);
        this.state = {
            recommendsMap: [],
        }
    }

    render() {
        return (
            <div className={'recommend'}>
                { this.state.recommendsMap.map( (item, index) => {
                    return (
                        <div key={index}>
                            <div className={'h3'}>
                                <h3 className={'wind-wap-fontcolor'}>
                                    <span className={'line-wap-bordercolor'}></span>
                                    {item.name}
                                </h3>
                            </div>
                            {item.novels.map( (subItem, subIndex) => {
                                return (<div key={subIndex} className={'recommend-body'}>
                                    <div className={'content'} onClick={this.Jump.bind(this, subItem.novelId)}>
                                        <div className={'content-header'}>
                                            <Image className={'ant-img'} src={subItem.coverUrl} preview={false}  fallback={'http://image.hanlingsha.love/lwa/novel/lwa-default-novel-cover.jpeg'} />
                                        </div>
                                        <div className={'content-body'}>
                                            <h2 className={'title'}>
                                                {subItem.novelName}
                                            </h2>
                                            <p className={'classify'}>
                                                <Tag className={'tag'}>{subItem.tagName}</Tag>
                                            </p>
                                            <Paragraph className={'remark'} ellipsis={{ rows: 2,}}>
                                                {subItem.intro} 
                                            </Paragraph>
                                        </div>
                                    </div>
                                </div>)
                            })}
                        </div>
                    )
                })}
                
            </div>
        );
    }

    UNSAFE_componentWillMount() {

    }

    componentDidMount() {
        this.getEssences();
    }

    Jump(id) {
        this.props.history.push({pathname: '/details' , state:{
            novelId: id,
        }});
    }

    getEssences(userInfo) {
        Http.get('/Essence/getLists').then( res => {
            let recommendsMap = [];
            res.resultData.forEach( (item, index) => {
                if (item.templateType === '4N') {
                    recommendsMap.push(item);
                }
            })
            this.setState({ recommendsMap});
        });
    }

}
export default withRouter(Recommend);


